<!DOCTYPE html>
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="YAML is a format that relies on white spacing to separate out the various elements of content. Jekyll lets you use Liquid with YAML as a way to parse through...">
<meta name="keywords" content="formatting,  search">
<title>YAML tutorial in the context of Jekyll | 常见故障解决方案</title>
<link rel="stylesheet" href="css/syntax.css">


<link rel="stylesheet" type="text/css" href="css/font-awesome.min-4.5.0.css">
<!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
<link rel="stylesheet" href="css/modern-business.css">
<link rel="stylesheet" href="css/lavish-bootstrap.css">
<link rel="stylesheet" href="css/customstyles.css">
<link rel="stylesheet" href="css/theme-blue.css">


<script type="text/javascript" charset="utf8" src="js/jquery.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/jquery.navgoco.min.js"></script>


<script src="js/bootstrap.min.js"></script>
<script src="js/anchor.min.js"></script>
<script src="js/toc.js"></script>
<script src="js/customscripts.js"></script>

<link rel="shortcut icon" href="images/favicon.ico">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://cdn.bootcss.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<link rel="alternate" type="application/rss+xml" title="" href="feed.xml">

    <script>
        $(document).ready(function() {
            // Initialize navgoco with default options
            $("#mysidebar").navgoco({
                caretHtml: '',
                accordion: true,
                openClass: 'active', // open
                save: false, // leave false or nav highlighting doesn't work right
                cookie: {
                    name: 'navgoco',
                    expires: false,
                    path: '/'
                },
                slide: {
                    duration: 400,
                    easing: 'swing'
                }
            });

            $("#collapseAll").click(function(e) {
                e.preventDefault();
                $("#mysidebar").navgoco('toggle', false);
            });

            $("#expandAll").click(function(e) {
                e.preventDefault();
                $("#mysidebar").navgoco('toggle', true);
            });

        });

    </script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>

    

</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container topnavlinks">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="fa fa-home fa-lg navbar-brand" href="index.html">&nbsp;<span class="projectTitle"> 常见故障解决方案</span></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <!-- entries without drop-downs appear here -->
                
                
                
                <li><a href="index.html">重新搜索</a></li>
                
                
                
                <!-- entries with drop-downs appear here -->
                <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
                
                
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他文档入口<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        
                        
                        <li><a href="index.html">常见故障解决方案</a></li>
                        
                        
                        
                        <li><a href="p1_sample1.html">常用语法</a></li>
                        
                        
                    </ul>
                </li>
                
                
                
			<li><a class="email" title="问题反馈" href="#" onclick="javascript:window.location='mailto:Merlin_Wu@apllogistics.com?subject=《常见故障解决方案》反馈&body=%0D____________________________________________________________________%0D问题页面：%09YAML tutorial in the context of Jekyll %0D问题地址：%09' + window.location.href;"><i class="fa fa-envelope-o"></i> 邮件反馈</a><li>

		
                <!--comment out this block if you want to hide search-->
                <li>
                    <!--start search-->
                    <!-- <div id="search-demo-container">
                        <input type="text" id="search-input" placeholder="search...">
                        <ul id="results-container"></ul>
                    </div>
                    <script src="js/jekyll-search.js" type="text/javascript"></script>
                    <script type="text/javascript">
                            SimpleJekyllSearch.init({
                                searchInput: document.getElementById('search-input'),
                                resultsContainer: document.getElementById('results-container'),
                                dataSource: 'search.json',
                                searchResultTemplate: '<li><a href="{url}" title="YAML tutorial in the context of Jekyll">{title}</a></li>',
                    noResultsText: 'No results found.',
                            limit: 10,
                            fuzzy: true,
                    })
                    </script> -->
                    <!--end search-->
                </li>
            </ul>
        </div>
        </div>
        <!-- /.container -->
</nav>

<!-- Page Content -->
<div class="container">
    <div class="col-lg-12">&nbsp;</div>
    <!-- Content Row -->
    <div class="row">
        <!-- Sidebar Column -->
        <div class="col-md-3">

          












<!--  -->


<ul id="mysidebar" class="nav">
    <li class="sidebarTitle">目录 </li>
    
    
    
        
    
    <li>
        <a href="#">常用操作</a>
        <ul>
            
            
            
            <li><a href="index.html">搜索</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_introduction.html">Introduction</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_supported_features.html">Supported features</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_about.html">About the theme author</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_support.html">Support</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Release Notes</a>
        <ul>
            
            
            
            <li><a href="mydoc_release_notes_60.html">6.0 Release notes</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_release_notes_50.html">5.0 Release notes</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Installation</a>
        <ul>
            
            
            
            <li><a href="mydoc_about_ruby_gems_etc.html">About Ruby, Gems, Bundler, etc.</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_install_jekyll_on_mac.html">Install Jekyll on Mac</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_install_jekyll_on_windows.html">Install Jekyll on Windows</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Authoring</a>
        <ul>
            
            
            
            <li><a href="mydoc_pages.html">Pages</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_posts.html">Posts</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_lists.html">Lists</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_conditional_logic.html">Conditional logic</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_content_reuse.html">Content reuse</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_collections.html">Collections</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_webstorm_text_editor.html">WebStorm editor tips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_atom_text_editor.html">Atom editor tips</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Navigation</a>
        <ul>
            
            
            
            <li><a href="mydoc_sidebar_navigation.html">Sidebar navigation</a></li>
            
            
            
            
            
            
            <li class="active"><a href="mydoc_yaml_tutorial.html">YAML tutorial in the context of Jekyll</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_tags.html">Tags</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_series.html">Series</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Formatting</a>
        <ul>
            
            
            
            <li><a href="mydoc_adding_tooltips.html">Tooltips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_alerts.html">Alerts</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_icons.html">Icons</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_images.html">Images</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_code_samples.html">Code samples</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_labels.html">Labels</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_hyperlinks.html">Links</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_navtabs.html">Navtabs</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_tables.html">Tables</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_syntax_highlighting.html">Syntax highlighting</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_workflow_maps.html">Workflow maps</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Handling reviews</a>
        <ul>
            
            
            
            <li><a href="mydoc_commenting_on_files.html">Commenting on files</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Publishing</a>
        <ul>
            
            
            
            <li><a href="mydoc_build_arguments.html">Build arguments</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_themes.html">Themes</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_generating_pdfs.html">Generating PDFs</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_help_api.html">Help APIs and UI tooltips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_search_configuration.html">Search configuration</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_iterm_profiles.html">iTerm profiles</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_push_build_to_server.html">Pushing builds to server</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_no_password_prompts_scp.html">Getting around the password prompts in SCP</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_publishing_github_pages.html">Publishing on Github Pages</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Special layouts</a>
        <ul>
            
            
            
            <li><a href="mydoc_kb_layout.html">Knowledge-base layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_glossary.html">Glossary layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_faq_layout.html">FAQ layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_scroll.html">Scroll layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_shuffle.html">Shuffle layout</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Troubleshooting</a>
        <ul>
            
            
            
            <li><a href="mydoc_troubleshooting.html">Troubleshooting</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Tag archives</a>
        <ul>
            
            
            
            <li><a href="mydoc_tag_archives_overview.html">Tag archives overview</a></li>
            
            
            
            <li class="subfolders">
                <a href="#">Tag archive pages</a>
                <ul>
                    
                    
                    
                    <li><a href="tag_formatting.html">Formatting pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_navigation.html">Navigation pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_content_types.html">Content types pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_publishing.html">Publishing pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_special_layouts.html">Special layout pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_collaboration.html">Collaboration pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_troubleshooting.html">Troubleshooting pages</a></li>
                    
                    
                    
                </ul>
            </li>
            
            
            
            
        </ul>
        
        
        
        <!-- if you aren't using the accordion, uncomment this block:
           <p class="external">
               <a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
           </p>
           -->
    </li>
</ul>
</div>

<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above. Otherwise, if placed inside customscripts.js, the script runs before the sidebar code runs and the class never gets inserted.-->
<script>$("li.active").parents('li').toggleClass("active");</script>

    <!-- Content Column -->
    <div class="col-md-9">
        <div class="post-header">
   <h1 class="post-title-main">YAML tutorial in the context of Jekyll</h1>
</div>



<div class="post-content">

   
    <div class="summary">YAML is a format that relies on white spacing to separate out the various elements of content. Jekyll lets you use Liquid with YAML as a way to parse through the data. Storing items for your table of contents is one of the most common uses of YAML with Jekyll.</div>
   

    
    
<!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
<script>
$( document ).ready(function() {
  // Handler for .ready() called.

$('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2,h3,h4' });

/* this offset helps account for the space taken up by the floating toolbar. */
$('#toc').on('click', 'a', function() {
  var target = $(this.getAttribute('href'))
    , scroll_target = target.offset().top

  $(window).scrollTop(scroll_target - 10);
  return false
})
  
});
</script>

<div id="toc"></div>

    

    

    

    

  <h2 id="overview">Overview</h2>
<p>One of the most interesting features of Jekyll is the ability to separate out data elements from formatting elements using a combination of YAML and Liquid. This setup is most common when you’re trying to create a table of contents.</p>

<p>Not many Jekyll themes actually have a robust table of contents, which is critical when you are creating any kind of documentation or reference material that has a lot of pages.</p>

<p>Here’s the basic approach in creating a table of contents. You store your data items in a YAML file using YAML syntax. (I’ll go over more about YAML syntax in a later section.) You then create your HTML structure in another file, such as sidebar.html. You might leverage one of the many different table of content frameworks (such as <a href="https://github.com/tefra/navgoco">Navgoco</a>) that have been created for this HTML structure.</p>

<p>Then, using Liquid syntax for loops and conditions, you access all of those values from the data file and splice them into HTML formatting. This will become more clear as we go through some examples.</p>

<h2 id="yaml-overview">YAML overview</h2>

<p>Rather than just jump into YAML at the most advanced level, I’m going to start from ground zero with an introduction to YAML and how you access basic values in your data files using Jekyll.</p>

<p>Note that you don’t actually have to use Jekyll when using YAML. YAML is used in a lot of other systems and is a format completely independent of Jekyll. However, because Jekyll uses Liquid, it gives you a lot of power to parse through your YAML data and make use of it.</p>

<p>YAML itself doesn’t do anything on its own — it’s just a way of storing your data in a specific structure that other utilities can parse.</p>

<h2 id="yaml-basics">YAML basics</h2>
<p>You can read about YAML from a lot of different sources. Here are some basic characteristics of YAML:</p>

<ul>
  <li>YAML (“YAML Ain’t Markup Language”) doesn’t use markup tags. This means you won’t see any kind of angle brackets. It uses white space as a way to form the structure. This makes YAML much more human readable.</li>
  <li>Because YAML does use white space for the structure, YAML is extremely picky about the exactness of spaces. If you have just one extra space somewhere, it can cause the whole file to be invalid.</li>
  <li>For each new level in YAML, you indent two spaces. Each level provides a different access point for the content. You use dot notation to access each new level.</li>
  <li>Because tabs are not universally implemented the same way in editors, a tab might not equate to two spaces. In general, it’s best to manually type two spaces to create a new level in YAML.</li>
  <li>YAML has several types of elements. The most common are mappings and lists. A mapping is simply a key-value pair. A list is a sequence of items. List start with hyphens.</li>
  <li>Items at each level can have various properties. You can create conditions based on the properties.</li>
  <li>You can use “for” loops to iterate through a list.</li>
</ul>

<p>I realize a lot of this vague and general; however, it will become a lot more clear as we go through some concrete examples.</p>

<p>In the _data/mydoc folder, there’s a file called samplelist.yml. All of these examples come from that file.</p>

<h2 id="example-1-simple-mapping">Example 1: Simple mapping</h2>

<p><strong>YAML:</strong></p>

<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">name</span><span class="pi">:</span>
  <span class="s">husband</span><span class="pi">:</span> <span class="s">Tom</span>
  <span class="s">wife</span><span class="pi">:</span> <span class="s">Shannon</span>
</code></pre>
</div>

<p><strong>Markdown + Liquid:</strong></p>

<div class="language-liquid highlighter-rouge"><pre class="highlight"><code>Husband's name: <span class="p">{{</span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">samplelist</span><span class="p">.</span><span class="nv">name</span><span class="p">.</span><span class="nv">husband</span><span class="p">}}</span>

Wife's name: <span class="p">{{</span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">samplelist</span><span class="p">.</span><span class="nv">name</span><span class="p">.</span><span class="nv">wife</span><span class="p">}}</span>
</code></pre>
</div>

<p>Notice that in order to access the data file, you use <code class="highlighter-rouge">site.data.samplelist</code>. <code class="highlighter-rouge">mydoc</code> is the folder, and <code class="highlighter-rouge">samplelist</code> is the name of the YAML file.</p>

<p><strong>Result:</strong></p>

<p>Husband’s name: Tom</p>

<p>Wife’s name: Shannon</p>

<h2 id="example-2-line-breaks">Example 2: Line breaks</h2>

<p><strong>YAML:</strong></p>

<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">feedback</span><span class="pi">:</span> <span class="pi">&gt;</span>
  <span class="no">This is my feedback to you.</span>
  <span class="no">Even if I include linebreaks here,</span>
  <span class="no">all of the linebreaks will be removed when the value is inserted.</span>

<span class="s">block</span><span class="pi">:</span> <span class="pi">|</span>
    <span class="no">This pipe does something a little different.</span>
    <span class="no">It preserves the breaks.</span>
    <span class="no">This is really helpful for code samples,</span>
    <span class="no">since you can format the code samples with</span>
       <span class="no">the appropriate</span>
</code></pre>
</div>

<p><strong>Markdown:</strong></p>

<div class="language-liquid highlighter-rouge"><pre class="highlight"><code>**Feedback**
This is my feedback to you. Even if I include linebreaks here, all of the linebreaks will be removed when the value is inserted.
  


**Block**
This pipe does something a little different. 
It preserves the breaks.
This is really helpful for code samples, 
since you can format the code samples with
   the appropriate
   white spacing.
</code></pre>
</div>

<p><strong>Result:</strong></p>

<p><strong>Feedback</strong>
This is my feedback to you. Even if I include linebreaks here, all of the linebreaks will be removed when the value is inserted.</p>

<p><strong>Block</strong>
This pipe does something a little different. 
It preserves the breaks.
This is really helpful for code samples, 
since you can format the code samples with
   the appropriate
   white spacing.</p>

<p>The right angle bracket <code class="highlighter-rouge">&gt;</code> allows you to put the value on the next lines (which must be indented). Even if you create a line break, the output will remove all of those line breaks, creating one paragraph.</p>

<p>The pipe <code class="highlighter-rouge">|</code> functions like the angle bracket in that it allows you to put the values for the mapping on the next lines (which again must be indented). However, the pipe does preserve all of the line breaks that you use. This makes the pipe method ideal for storing code samples.</p>

<h2 id="example-3-simple-list">Example 3: Simple list</h2>

<p><strong>YAML</strong>:</p>

<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">bikes</span><span class="pi">:</span>
  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">mountain bikes</span>
  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">road bikes</span>
  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">hybrid bikes</span>
</code></pre>
</div>

<p><strong>Markdown + Liquid:</strong></p>

<div class="language-liquid highlighter-rouge"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.bikes<span class="w"> </span><span class="p">%}</span>
* <span class="p">{{</span><span class="nv">item</span><span class="p">.</span><span class="nv">title</span><span class="p">}}</span>
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
</code></pre>
</div>

<p><strong>Result:</strong></p>

<ul>
  <li>
    <p>mountain bikes</p>
  </li>
  <li>
    <p>road bikes</p>
  </li>
  <li>
    <p>hybrid bikes</p>
  </li>
</ul>

<p>Here we use a “for” loop to get each item in the bikes list. By using <code class="highlighter-rouge">.title</code> we only get the <code class="highlighter-rouge">title</code> property from each list item.</p>

<h2 id="example-4-list-items">Example 4: List items</h2>

<p><strong>YAML:</strong></p>

<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">salesteams</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Regions</span>
 <span class="s">subfolderitems</span><span class="pi">:</span>
   <span class="pi">-</span> <span class="s">location</span><span class="pi">:</span> <span class="s">US</span>
   <span class="pi">-</span> <span class="s">location</span><span class="pi">:</span> <span class="s">Spain</span>
   <span class="pi">-</span> <span class="s">location</span><span class="pi">:</span> <span class="s">France</span>
</code></pre>
</div>

<p><strong>Markdown + Liquid:</strong></p>

<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">for</span><span class="w"> </span><span class="err">item</span><span class="w"> </span><span class="err">in</span><span class="w"> </span><span class="err">site.data.samplelist.salesteams</span><span class="w"> </span><span class="err">%</span><span class="p">}</span><span class="w">
</span><span class="err">&lt;h</span><span class="mi">3</span><span class="err">&gt;</span><span class="p">{</span><span class="err">{item.title</span><span class="p">}</span><span class="err">}&lt;/h</span><span class="mi">3</span><span class="err">&gt;</span><span class="w">
</span><span class="err">&lt;ul&gt;</span><span class="w">
</span><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">for</span><span class="w"> </span><span class="err">entry</span><span class="w"> </span><span class="err">in</span><span class="w"> </span><span class="err">item.subitems</span><span class="w"> </span><span class="err">%</span><span class="p">}</span><span class="w">
</span><span class="err">&lt;li&gt;</span><span class="p">{</span><span class="err">{entry.location</span><span class="p">}</span><span class="err">}&lt;/li&gt;</span><span class="w">
</span><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">endfor</span><span class="w"> </span><span class="err">%</span><span class="p">}</span><span class="w">
</span><span class="err">&lt;/ul&gt;</span><span class="w">
</span><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">endfor</span><span class="w"> </span><span class="err">%</span><span class="p">}</span><span class="w">
</span></code></pre>
</div>

<p><strong>Result:</strong></p>

<h3>Regions</h3>
<ul>

</ul>

<p>Hopefully you can start to see how to wrap more complex formatting around the YAML content. When you use a “for” loop, you choose the variable of what to call the list items. The variable you choose to use becomes how you access the properties of each list item. In this case, I decided to use the variable <code class="highlighter-rouge">item</code>. In order to get each property of the list item, I used <code class="highlighter-rouge">item.subitems</code>.</p>

<p>Each list item starts with the hyphen <code class="highlighter-rouge">–</code>.  You cannot directly access the list item by referring to a mapping. You only loop through the list items. If you wanted to access the list item, you would have to use something like <code class="highlighter-rouge">[1]</code>, which is how you access the position in an array. You cannot access a list item like you can access a mapping key.</p>

<h2 id="example-5-table-of-contents">Example 5: Table of contents</h2>

<p><strong>YAML:</strong></p>

<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">toc</span><span class="pi">:</span>
  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Group 1</span>
    <span class="s">subfolderitems</span><span class="pi">:</span>
      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Thing 1</span>
      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Thing 2</span>
      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Thing 3</span>
  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Group 2</span>
    <span class="s">subfolderitems</span><span class="pi">:</span>
      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Piece 1</span>
      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Piece 2</span>
      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Piece 3</span>
  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Group 3</span>
    <span class="s">subfolderitems</span><span class="pi">:</span>
      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Widget 1</span>
      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Widget 2 it's</span>
      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Widget 3</span>
</code></pre>
</div>

<p><strong>Markdown + Liquid:</strong></p>

<div class="language-liquid highlighter-rouge"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.toc<span class="w"> </span><span class="p">%}</span>
&lt;h3&gt;<span class="p">{{</span><span class="nv">item</span><span class="p">.</span><span class="nv">title</span><span class="p">}}</span>&lt;/h3&gt;
&lt;ul&gt;
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>entry<span class="w"> </span>in<span class="w"> </span>item.subfolderitems<span class="w"> </span><span class="p">%}</span>
&lt;li&gt;<span class="p">{{</span><span class="nv">entry</span><span class="p">.</span><span class="nv">page</span><span class="p">}}</span>&lt;/li&gt;
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
&lt;/ul&gt;
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
</code></pre>
</div>

<p><strong>Result:</strong></p>

<h3>Group 1</h3>
<ul>

<li>Thing 1</li>

<li>Thing 2</li>

<li>Thing 3</li>

</ul>

<h3>Group 2</h3>
<ul>

<li>Piece 1</li>

<li>Piece 2</li>

<li>Piece 3</li>

</ul>

<h3>Group 3</h3>
<ul>

<li>Widget 1</li>

<li>Widget 2</li>

<li>Widget 3</li>

</ul>

<p>This example is similar to the previous one, but it’s more developed as a real table of contents.</p>

<h2 id="example-6-variables">Example 6: Variables</h2>

<p><strong>YAML:</strong></p>

<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">something</span><span class="pi">:</span> <span class="nl">&amp;hello</span> <span class="s">Greetings earthling!</span>
<span class="s">myref</span><span class="pi">:</span> <span class="nv">*hello</span>
</code></pre>
</div>

<p><strong>Markdown:</strong></p>

<div class="language-liquid highlighter-rouge"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">samplelist</span><span class="p">.</span><span class="nv">myref</span><span class="w"> </span><span class="p">}}</span>
</code></pre>
</div>

<p><strong>Result:</strong></p>

<p>Greetings earthling!</p>

<p>This example is notably different. Here I’m showing how to reuse content in YAML file. If you have the same value that you want to repeat in other mappings, you can create a variable using the <code class="highlighter-rouge">&amp;</code> symbol. Then when you want to refer to that variable’s value, you use an asterisk <code class="highlighter-rouge">*</code> followed by the name of the variable.</p>

<p>In this case the variable is <code class="highlighter-rouge">&amp;hello</code> and its value is <code class="highlighter-rouge">Greetings earthling!</code> In order to reuse that same value, you just type <code class="highlighter-rouge">*hello</code>.</p>

<p>I don’t use variables much, but that’s not to say they couldn’t be highly useful. For example, let’s say you put name of the product in parentheses after each title (because you have various products that you’re providing documentation for in the same site). You could create a variable for that product name so that if you change how you’re referring to it, you wouldn’t have to change all instances of it in your YAML file.</p>

<h2 id="example-7-positions-in-lists">Example 7: Positions in lists</h2>

<p><strong>YAML:</strong></p>

<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">about</span><span class="pi">:</span>
 <span class="pi">-</span> <span class="s">zero</span>
 <span class="pi">-</span> <span class="s">one</span>
 <span class="pi">-</span> <span class="s">two</span>
 <span class="pi">-</span> <span class="s">three</span>
</code></pre>
</div>

<p><strong>Markdown:</strong></p>

<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">site.data.samplelist.about[0]</span><span class="w"> </span><span class="p">}</span><span class="err">}</span><span class="w">
</span></code></pre>
</div>

<p><strong>Result:</strong></p>

<p>zero</p>

<p>You can see that I’m accessing one of the items in the list using <code class="highlighter-rouge">[0]</code>. This refers to the position in the array where a list item is. Like most programming languages, you start counting at zero, not one.</p>

<p>I wanted to include this example because it points to the challenge in getting a value from a specific list item. You can’t just call out a specific item in a list like you can with a mapping. This is why you usually iterate through the list items using a “for” loop.</p>

<h2 id="example-8-properties-from-list-items-at-specific-positions">Example 8: Properties from list items at specific positions</h2>

<p><strong>YAML:</strong></p>

<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">numbercolors</span><span class="pi">:</span>
 <span class="pi">-</span> <span class="s">zero</span><span class="pi">:</span>
   <span class="s">properties</span><span class="pi">:</span> <span class="s">red</span>
 <span class="pi">-</span> <span class="s">one</span><span class="pi">:</span>
   <span class="s">properties</span><span class="pi">:</span> <span class="s">yellow</span>
 <span class="pi">-</span> <span class="s">two</span><span class="pi">:</span>
   <span class="s">properties</span><span class="pi">:</span> <span class="s">green</span>
 <span class="pi">-</span> <span class="s">three</span><span class="pi">:</span>
   <span class="s">properties</span><span class="pi">:</span> <span class="s">blue</span>
</code></pre>
</div>

<p><strong>Markdown + Liquid:</strong></p>

<div class="language-liquid highlighter-rouge"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">samplelist</span><span class="p">.</span><span class="nv">numbercolors</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nv">properties</span><span class="w"> </span><span class="p">}}</span>
</code></pre>
</div>

<p><strong>Result:</strong></p>

<p>red</p>

<p>This example is similar as before; however, in this case were getting a specific property from the list item in the zero position.</p>

<h2 id="example-9-conditions">Example 9: Conditions</h2>

<p><strong>YAML:</strong></p>

<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">mypages</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">section1</span><span class="pi">:</span> <span class="s">Section 1</span>
  <span class="s">audience</span><span class="pi">:</span> <span class="s">developers</span>
  <span class="s">product</span><span class="pi">:</span> <span class="s">acme</span>
  <span class="s">url</span><span class="pi">:</span> <span class="s">facebook.com</span>
<span class="pi">-</span> <span class="s">section2</span><span class="pi">:</span> <span class="s">Section 2</span>
  <span class="s">audience</span><span class="pi">:</span> <span class="s">writers</span>
  <span class="s">product</span><span class="pi">:</span> <span class="s">acme</span>
  <span class="s">url</span><span class="pi">:</span> <span class="s">google.com</span>
<span class="pi">-</span> <span class="s">section3</span><span class="pi">:</span> <span class="s">Section 3</span>
  <span class="s">audience</span><span class="pi">:</span> <span class="s">developers</span>
  <span class="s">product</span><span class="pi">:</span> <span class="s">acme</span>
  <span class="s">url</span><span class="pi">:</span> <span class="s">amazon.com</span>
<span class="pi">-</span> <span class="s">section4</span><span class="pi">:</span> <span class="s">Section 4</span>
  <span class="s">audience</span><span class="pi">:</span> <span class="s">writers</span>
  <span class="s">product</span><span class="pi">:</span> <span class="s">gizmo</span>
  <span class="s">url</span><span class="pi">:</span> <span class="s">apple.com</span>
<span class="pi">-</span> <span class="s">section5</span><span class="pi">:</span> <span class="s">Section 5</span>
  <span class="s">audience</span><span class="pi">:</span> <span class="s">writers</span>
  <span class="s">product</span><span class="pi">:</span> <span class="s">acme</span>
  <span class="s">url</span><span class="pi">:</span> <span class="s">microsoft.com</span>
</code></pre>
</div>

<p><strong>Markdown + Liquid:</strong></p>

<div class="language-liquid highlighter-rouge"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>sec<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.mypages<span class="w"> </span><span class="p">%}</span>
<span class="p">{%</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">sec</span><span class="p">.</span><span class="nv">audience</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s2">"writers"</span><span class="w"> </span><span class="p">%}</span>
* <span class="p">{{</span><span class="nv">sec</span><span class="p">.</span><span class="nv">url</span><span class="p">}}</span>
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
</code></pre>
</div>

<p><strong>Result:</strong></p>

<ul>
  <li>
    <p>google.com</p>
  </li>
  <li>
    <p>apple.com</p>
  </li>
  <li>
    <p>microsoft.com</p>
  </li>
</ul>

<p>This example shows how you can use conditions in order to selectively get the YAML content. In your table of contents, you might have a lot of different pages. However, you might only want to get the pages for a particular audience. Conditions lets you get only the items that meet those audience attributes.</p>

<p>Now let’s adjust the condition just a little. Let’s add a second condition so that the <code class="highlighter-rouge">audience</code> property has to be <code class="highlighter-rouge">writers</code> and the <code class="highlighter-rouge">product</code> property has to be gizmo. This is how you would write it:</p>

<div class="language-liquid highlighter-rouge"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>sec<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.mypages<span class="w"> </span><span class="p">%}</span>
<span class="p">{%</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">sec</span><span class="p">.</span><span class="nv">audience</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s2">"writers"</span><span class="w"> </span><span class="nv">and</span><span class="w"> </span><span class="nv">sec</span><span class="p">.</span><span class="nv">product</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s2">"gizmo"</span><span class="w"> </span><span class="p">%}</span>
* <span class="p">{{</span><span class="nv">sec</span><span class="p">.</span><span class="nv">url</span><span class="p">}}</span>
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
</code></pre>
</div>

<p>And here is the result:</p>

<ul>
  <li>apple.com</li>
</ul>

<h2 id="more-resources">More resources</h2>

<p>For more examples and explanations, see this helpful post on tournemille.com: <a href="http://www.tournemille.com/blog/How-to-create-data-driven-navigation-in-Jekyll/">How to create data-driven navigation in Jekyll</a>.</p>



    <div class="tags">
        
        <b>Tags: </b>
        
        
        
        <a href="tag_formatting.html" class="btn btn-default navbar-btn cursorNorm" role="button">formatting</a>
        
        
        
    </div>

    

</div>

<hr class="shaded"/>

<footer>
            <div class="row">
                <div class="col-lg-12 footer">
               &copy;2016 . All rights reserved. <br />
 Site last generated: Oct 8, 2016 <br />
<!-- <p><img src="images/company_logo.png" alt="Company logo"/></p> -->
                </div>
            </div>
</footer>


    </div>
    <!-- /.row -->
</div>
<!-- /.container -->
    </div>

</body>

</html>
